<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Patient System</title>

    <!-- Google Font: Source Sans Pro -->
    <link rel="stylesheet"
          href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="./plugins/fontawesome-free/css/all.min.css">
    <!-- Ionicons -->
    <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
    <!-- Tempusdominus Bootstrap 4 -->
    <link rel="stylesheet" href="./plugins/tempusdominus-bootstrap-4/css/tempusdominus-bootstrap-4.min.css">
    <!-- iCheck -->
    <link rel="stylesheet" href="./plugins/icheck-bootstrap/icheck-bootstrap.min.css">
    <!-- JQVMap -->
    <link rel="stylesheet" href="./plugins/jqvmap/jqvmap.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="./css/adminlte.min.css">
    <!-- overlayScrollbars -->
    <link rel="stylesheet" href="./plugins/overlayScrollbars/css/OverlayScrollbars.min.css">
    <!-- Daterange picker -->
    <link rel="stylesheet" href="./plugins/daterangepicker/daterangepicker.css">
    <!-- summernote -->
    <link rel="stylesheet" href="./plugins/summernote/summernote-bs4.min.css">
    <!-- BootstrapTable -->
    <link rel="stylesheet" href="./plugins/bootstraptable/bootstrap-table.min.css">
    <style>
        #myiframe {
            height: calc(100vh - 120px);
            width: 100%;
        }

        #logout:hover::after {
            content: '退出登录';
            position: absolute;
            top: 60px;
            right: 5px;
            /* left: 100%; 调整位置 */
            /* top: 50%; */
            transform: translateY(-50%);
            background-color: #333;
            color: #fff;
            padding: 5px;
            border-radius: 3px;
            white-space: nowrap;
            z-index: 10;
            font-size: 12px;
        }

        .main-sidebar {
            background-color: rgb(126, 199, 213);
        }

        #user-info {
            color: white;
        }

        #info1 {
            background-color: rgb(17, 143, 168);
        }

        #info2 {
            color: rgb(17, 143, 168);
        }
    </style>
</head>

<body class="hold-transition sidebar-mini layout-fixed">
<div class="wrapper">

    <!-- Preloader -->
    <div class="preloader flex-column justify-content-center align-items-center">
        <img class="animation__shake" src="./img/AdminLTELogo.png" alt="AdminLTELogo" height="60" width="60">
    </div>

    <!-- Navbar -->
    <nav class="main-header navbar navbar-expand navbar-white navbar-light">
        <!-- Left navbar links -->
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"></i></a>
            </li>
            <li class="nav-item d-none d-sm-inline-block">
                <!-- <a href="./student_score.html" class="nav-link">Home</a> -->
            </li>
            <li class="nav-item d-none d-sm-inline-block">
                <!-- <a href="#" class="nav-link">Contact</a> -->
            </li>
        </ul>

        <!-- Right navbar links -->
        <ul class="navbar-nav ml-auto">
            <!-- Navbar Search -->
            <li class="nav-item">
                <a class="nav-link" data-widget="navbar-search" href="#" role="button">
                    <i class="fas fa-search"></i>
                </a>
                <div class="navbar-search-block">
                    <form class="form-inline">
                        <div class="input-group input-group-sm">
                            <input class="form-control form-control-navbar" type="search" placeholder="Search" aria-label="Search">
                            <div class="input-group-append">
                                <button class="btn btn-navbar" type="submit">
                                    <i class="fas fa-search"></i>
                                </button>
                                <button class="btn btn-navbar" type="button" data-widget="navbar-search">
                                    <i class="fas fa-times"></i>
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </li>

            <!-- Messages Dropdown Menu -->
            <li class="nav-item dropdown">
                <a class="nav-link" data-toggle="dropdown" href="#">
                    <i class="far fa-comments"></i>
                    <span class="badge badge-danger navbar-badge">3</span>
                </a>
                <div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
                    <a href="#" class="dropdown-item">
                        <!-- Message Start -->
                        <div class="media">
                            <img src="./img/user1-128x128.jpg" alt="User Avatar" class="img-size-50 mr-3 img-circle">
                            <div class="media-body">
                                <h3 class="dropdown-item-title">
                                    Brad Diesel
                                    <span class="float-right text-sm text-danger"><i class="fas fa-star"></i></span>
                                </h3>
                                <p class="text-sm">Call me whenever you can...</p>
                                <p class="text-sm text-muted"><i class="far fa-clock mr-1"></i> 4 Hours Ago</p>
                            </div>
                        </div>
                        <!-- Message End -->
                    </a>
                    <div class="dropdown-divider"></div>
                    <a href="#" class="dropdown-item">
                        <!-- Message Start -->
                        <div class="media">
                            <img src="./img/user8-128x128.jpg" alt="User Avatar" class="img-size-50 img-circle mr-3">
                            <div class="media-body">
                                <h3 class="dropdown-item-title">
                                    John Pierce
                                    <span class="float-right text-sm text-muted"><i class="fas fa-star"></i></span>
                                </h3>
                                <p class="text-sm">I got your message bro</p>
                                <p class="text-sm text-muted"><i class="far fa-clock mr-1"></i> 4 Hours Ago</p>
                            </div>
                        </div>
                        <!-- Message End -->
                    </a>
                    <div class="dropdown-divider"></div>
                    <a href="#" class="dropdown-item">
                        <!-- Message Start -->
                        <div class="media">
                            <img src="./img/user3-128x128.jpg" alt="User Avatar" class="img-size-50 img-circle mr-3">
                            <div class="media-body">
                                <h3 class="dropdown-item-title">
                                    Nora Silvester
                                    <span class="float-right text-sm text-warning"><i class="fas fa-star"></i></span>
                                </h3>
                                <p class="text-sm">The subject goes here</p>
                                <p class="text-sm text-muted"><i class="far fa-clock mr-1"></i> 4 Hours Ago</p>
                            </div>
                        </div>
                        <!-- Message End -->
                    </a>
                    <div class="dropdown-divider"></div>
                    <a href="#" class="dropdown-item dropdown-footer">See All Messages</a>
                </div>
            </li>
            <!-- Notifications Dropdown Menu -->
            <li class="nav-item dropdown">
                <a class="nav-link" data-toggle="dropdown" href="#">
                    <i class="far fa-bell"></i>
                    <span class="badge badge-warning navbar-badge">15</span>
                </a>
                <div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
                    <span class="dropdown-item dropdown-header">15 Notifications</span>
                    <div class="dropdown-divider"></div>
                    <a href="#" class="dropdown-item">
                        <i class="fas fa-envelope mr-2"></i> 4 new messages
                        <span class="float-right text-muted text-sm">3 mins</span>
                    </a>
                    <div class="dropdown-divider"></div>
                    <a href="#" class="dropdown-item">
                        <i class="fas fa-users mr-2"></i> 8 friend requests
                        <span class="float-right text-muted text-sm">12 hours</span>
                    </a>
                    <div class="dropdown-divider"></div>
                    <a href="#" class="dropdown-item">
                        <i class="fas fa-file mr-2"></i> 3 new reports
                        <span class="float-right text-muted text-sm">2 days</span>
                    </a>
                    <div class="dropdown-divider"></div>
                    <a href="#" class="dropdown-item dropdown-footer">See All Notifications</a>
                </div>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-widget="fullscreen" href="#" role="button">
                    <i class="fas fa-expand-arrows-alt"></i>
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-widget="control-sidebar" data-controlsidebar-slide="true" href="#" role="button">
                    <i class="fas fa-th-large"></i>
                </a>
            </li>
            <li class="nav-item" id="logout">
                <svg onclick="logout();" style='width: 25px; height: 25px; position: relative; top: 5px; cursor: pointer;'
                     title="退出登录" t="1719585249769" class="icon" viewBox="0 0 1024 1024" version="1.1"
                     xmlns="http://www.w3.org/2000/svg" p-id="5082" width="200" height="200">
                    <path d="M469.243751 161.043675l82.672825 0 0 413.485899-82.672825 0 0-413.485899Z" fill="#00c9b5"
                          p-id="5083"></path>
                    <path
                            d="M700.78599 260.311441l-57.843348 57.897584c66.076862 45.426563 115.680557 124.041983 115.680557 214.947299 0 136.460815-111.620082 248.074757-248.075781 248.074757-136.393277 0-248.075781-111.614965-248.075781-248.074757 0-90.905315 49.666117-169.520735 119.92318-210.823379l-62.02048-62.02048c-82.735247 62.02048-140.574502 161.225824-140.574502 272.844882 0 182.001989 148.869414 330.810004 330.747582 330.810004 181.94059 0 330.808981-148.806992 330.808981-330.810004C841.356399 421.537264 783.453699 322.331921 700.78599 260.311441"
                            fill="#00c9b5" p-id="5084"></path>
                </svg>
            </li>
        </ul>
    </nav>
    <!-- /.navbar -->
    <!-- Main Sidebar Container -->
    <aside class="main-sidebar sidebar-dark-primary elevation-4">
        <!-- Sidebar -->
        <div class="sidebar">
            <!-- Sidebar user panel (optional) -->
            <div class="user-panel mt-3 pb-3 mb-3 d-flex">
                <div class="image">
                    <img id="user-image" src="./img/boy.png" class="img-circle elevation-2" alt="User Image">
                </div>
                <div class="info">
                    <!-- <p id="user-info">User Name</p> -->
                    <a id="user-info" class="d-block"></a>
                </div>
            </div>
            <!-- Sidebar Menu -->
            <nav class="mt-2">
                <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
                    <!-- Add icons to the links using the .nav-icon class
                       with font-awesome or any other icon font library -->
                    <li class="nav-item menu-open">
                        <a href="#" class="nav-link active" id="info1">
                            <i class="nav-icon fas fa-tachometer-alt"></i>
                            <p>
                                功能
                                <i class="right fas fa-angle-left"></i>
                            </p>
                        </a>
                        <ul class="nav nav-treeview">
                            <li class="nav-item">
                                <a href="./patient_recommend.html" class="nav-link active" onclick="return indexLocation(this);">
                                    <i class="far fa-bell nav-icon"></i>
                                    <p style="color: white;">科室推荐</p>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a href="./patient_register.html" class="nav-link active" onclick="return indexLocation(this);">
                                    <i class="far fa-bell nav-icon"></i>
                                    <p style="color: white;">预约挂号</p>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a href="./patient_appointment.html" class="nav-link active" onclick="return indexLocation(this);">
                                    <i class="far fa-bell nav-icon"></i>
                                    <p style="color: white;">挂号信息</p>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a href="./patient_introduction.html" class="nav-link active" onclick="return indexLocation(this);">
                                    <i class="far fa-bell nav-icon"></i>
                                    <p style="color: white;">科室介绍</p>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a href="./patient_rank.html" class="nav-link active" onclick="return indexLocation(this);">
                                    <i class="far fa-bell nav-icon"></i>
                                    <p style="color: white;">医院排名</p>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a href="./patient_advice.html" class="nav-link active" onclick="return indexLocation(this);">
                                    <i class="far fa-bell nav-icon"></i>
                                    <p style="color: white;">反馈建议</p>
                                </a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </nav>
            <!-- /.sidebar-menu -->
        </div>
        <!-- /.sidebar -->
    </aside>

    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper iframe-mode" data-widget="iframe" data-loading-screen="750">
        <iframe src="./patient_recommend.html" frameborder="0" class="myiframe" id="myiframe"></iframe>
    </div>
    <!-- <div class="content-wrapper">
      <iframe src="./score.html" frameboreder="0" class="myiframe" id="myiframe"></iframe>
    </div> -->
    <!-- /.content-wrapper -->
    <footer class="main-footer">
        <strong>Time 2024-11-3 For Web Final-assignment <a id="info2" href="https://www.ctbu.edu.cn/">@重庆工商大学</a></strong>
    </footer>

    <!-- Control Sidebar -->
    <aside class="control-sidebar control-sidebar-dark">
        <!-- Control sidebar content goes here -->
    </aside>
    <!-- /.control-sidebar -->
</div>
<!-- ./wrapper -->
<!-- jQuery -->
<script src="./plugins/jquery/jquery.min.js"></script>
<!-- jQuery UI 1.11.4 -->
<script src="./plugins/jquery-ui/jquery-ui.min.js"></script>
<!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip -->
<script>
    $.widget.bridge('uibutton', $.ui.button)
</script>
<!-- Bootstrap 4 -->
<script src="./plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- ChartJS -->
<script src="./plugins/chart.js/Chart.min.js"></script>
<!-- Sparkline -->
<script src="./plugins/sparklines/sparkline.js"></script>
<!-- JQVMap -->
<script src="./plugins/jqvmap/jquery.vmap.min.js"></script>
<script src="./plugins/jqvmap/maps/jquery.vmap.usa.js"></script>
<!-- jQuery Knob Chart -->
<script src="./plugins/jquery-knob/jquery.knob.min.js"></script>
<!-- daterangepicker -->
<script src="./plugins/moment/moment.min.js"></script>
<script src="./plugins/daterangepicker/daterangepicker.js"></script>
<!-- Tempusdominus Bootstrap 4 -->
<script src="./plugins/tempusdominus-bootstrap-4/js/tempusdominus-bootstrap-4.min.js"></script>
<!-- Summernote -->
<script src="./plugins/summernote/summernote-bs4.min.js"></script>
<!-- overlayScrollbars -->
<script src="./plugins/overlayScrollbars/js/jquery.overlayScrollbars.min.js"></script>
<!-- AdminLTE App -->
<script src="./js/adminlte.js"></script>
<!-- BootstrapTable -->
<script src="./plugins/bootstraptable/bootstrap-table.min.js"></script>
<script src="./plugins/bootstraptable/locale/bootstrap-table-zh-CN.min.js"></script>
<!-- Validate -->
<script src="./plugins/jqvalidate/jquery.validate.min.js"></script>
<script src="./plugins/jqvalidate/localization/messages_zh.min.js"></script>
<script src="./pagejs/indexjs/index.js"></script>
<script src="./pagejs/patient/patient_iframe.js"></script>
<script>
    function logout() {
        $.ajax({
            url: '/webapi/logout',
            type: 'POST',
            success: function () {
                window.location.href = './index.html'; // 登出成功后跳转到首页
            },
            error: function () {
                alert('登出失败，请稍后重试。');
            }
        });
    }
    // 从localStorage中获取学生姓名
    var patientName = localStorage.getItem('name');
    // console.log(studentName);
    $(document).ready(function () {
        // 向后端发送请求获取患者数据
        $.ajax({
            url: '/webapi/patient/findByName',
            method: 'GET',
            data: {
                patientName: patientName
            }
        }).done(function (data) {
            if (data && data.length > 0) {
                var patient = data[0]; // 假设返回的是一个患者列表，取第一个患者数据
                var userImage = $('#user-image');
                var userInfo = $('#user-info');
                // 根据性别设置图片
                if (patient.patientSex === 2) {
                    console
                    userImage.attr('src', './img/girl.png'); // 女性图片路径
                } else if (patient.patientSex === 1) {
                    userImage.attr('src', './img/boy.png'); // 男性图片路径
                }
                // 设置用户信息
                userInfo.text(`${patient.patientName} (患者账号: ${patient.patientNo})`);
            } else {
                alert('Patient not found');
            }
        }).fail(function (jqXHR, textStatus, errorThrown) {
            console.error('Error fetching patient data:', textStatus, errorThrown);
        });
    })
</script>
</body>

</html>